<template>
  <div class="main">
    <div style="width: 100%;height: 40px;background-color: #fff;margin-bottom: 20px;padding: 10px;">当前模块:<span
        style="font-weight: bold;">教育人员对在校寄宿生的基本情况填写模块</span> </div>
    <div class="main-body">

      <div class="main-header float-left">

        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">

          <el-form-item label="学校：">
            <el-select v-model="formInline.xq" placeholder="请选择学校" @change="xq_listChange">
              <el-option v-for="item in xq_list" :key="item.newXqdm" :label="item.xqjc" :value="item.newXqdm">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年级：">
            <el-select v-model="formInline.nj" placeholder="请选择年级" @change="nj_listChange">
              <el-option v-for="(item, index) in nj_list" :key="index" :label="item.MC" :value="item.NJ">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="班级：">
            <el-select v-model="formInline.bj" placeholder="请选择班级" @change="getOnGuardFacultyway">
              <el-option v-for="(item, index) in bj_list" :key="index" :label="item.BJMC + '班'" :value="item.BJNO">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学生姓名：">
            <el-input v-model="formInline.xm" clearable placeholder="请输入学生姓名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
            <!-- <el-button type="primary" icon="el-icon-download">下载本区教职工表</el-button> -->
          </el-form-item>
        </el-form>
      </div>

      <el-dialog title="寄宿生关爱工作记录显示与修改窗口" :visible.sync="dialogDetails" width="1000px" :before-close="handleClose">
        <div style="padding-top: 6px;" class="font-all" id="nbprint">
          <div
            style="height: 40px;background-color: #FFEDED;color: #1C511C;font-size: 16px; display: flex;justify-content: center;align-items: center">
            在校寄宿学生与家庭教育基本情况记录
          </div>

          <el-descriptions class="margin-top" :column="3" size="small" border>
            <el-descriptions-item label="学生姓名" :span="1">{{ headerLoadData.XM }}</el-descriptions-item>
            <el-descriptions-item label="现就读" :span="1">{{ headerLoadData.XQJC }}</el-descriptions-item>
            <el-descriptions-item label="年级班级" :span="1">{{ headerLoadData.njmc + '(' + headerLoadData.bj + '班)'
              }}</el-descriptions-item>
            <el-descriptions-item label="家庭类别" :span="2"></el-descriptions-item>
            <el-descriptions-item label="学生类别">{{ headerLoadData.xslb }}</el-descriptions-item>
            <el-descriptions-item label="监护人类别" :span="3">{{
          headerLoadData.jssStuJbqk.jhrlbString }}</el-descriptions-item>
            <el-descriptions-item label="学生基本情况" :span="3">
              <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="headerLoadData.jssStuJbqk.jyqk">
              </el-input>
            </el-descriptions-item>
            <el-descriptions-item label="家庭教育基本情况" :span="3">
              <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="headerLoadData.jssStuJbqk.jtjyqk">
              </el-input>
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogDetails = false">取 消</el-button>
          <el-button type="primary" @click="pushAdd">确定提交修改</el-button>
        </span>
      </el-dialog>

      <div class="main-center float-left">
        <el-table :data="tableData" height="650" style="width: 100%;margin-top: 6px;"
          :header-cell-style="{ background: '#fafafa', color: '#000000e0', fontWeight: 600 }">
          <!-- <el-table-column type="index" label="序号" width="100"></el-table-column> -->
          <el-table-column prop="xm" label="姓名"></el-table-column>
          <el-table-column prop="XB" label="性别"></el-table-column>
          <el-table-column prop="XQJC" label="就读校区"></el-table-column>
          <el-table-column prop="NJMC" label="年级"></el-table-column>
          <el-table-column prop="BJ" label="班级"></el-table-column>
          <!-- <el-table-column prop="jhrMc" label="学生基本情况"></el-table-column> -->
          <!-- <el-table-column prop="jkztMc" label="家庭教育基本情况"></el-table-column> -->
          <el-table-column label="填报或修改" width="100">
            <template slot-scope="scope" style="z-index: -9999;">
              <el-button @click="handleClick(scope.row)" type="text" size="small"
                style="color: #ff4d4f;">编辑查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="footer-pagination">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="formInline.currentPage" :page-sizes="[10, 20, 30, 50, 100, 200, 300, 500]"
            :page-size="formInline.limit" layout="total, sizes, prev, pager, next, jumper" :total="formInline.total">
          </el-pagination>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
import httplogin from "../../api/login";
export default {
  name: 'Social',
  data() {
    return {
      printOption: {
        id: 'nbprint', // 打印元素的id 不需要携带#号
        popTitle: '教职工基本信息登记表' // 页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
      },
      tableData: [],
      formInline: {
        nj: "",
        xq: '',
        xm: '',
        currentPage: 1,
        limit: 10,
        total: 0
      },
      tStuJtcyList: [
        {
          id: "",
          sfzjlx: '',
          sfzjh: '',
          stuId: "",
          cw: "",
          name: "",
          age: '',
          zy: '',
          xl: "",
          jjnl: '',
          gzdw: "",
          lxfs: "",
          operateTime: "",
          operator: ""
        },
        {
          id: "",
          sfzjlx: '',
          sfzjh: '',
          stuId: "",
          cw: "",
          name: "",
          age: '',
          zy: '',
          xl: "",
          jjnl: '',
          gzdw: "",
          lxfs: "",
          operateTime: "",
          operator: ""
        },
      ],//家庭信息

      dm_jhrlb: [],//监护人类别
      dm_xl: [],//学历信息
      jssStuYdList: {
        jkzt: '',
        jhrlb: ''
      },
      xxdwXqList: [],
      dm_jkzk: [],
      classList: [
        {
          id: '01',
          className: '01'
        },
      ],
      headerLoadData: {
        jssStuJbqk: {
          jhrlbString: ' '
        }
      },

      xq_list: [],
      bj_list: [],//班级 options
      nj_list: [],//年级 options
      dialogDetails: false,
      JiaoZhiGongInfo: {},
      schoolList: [],
    }
  },
  mounted() {
    this.getschoolList()
  },
  methods: {
    async pushAdd() {
      let jssSqVo = {
        jyqk: this.headerLoadData.jyqk,
        jtjyqk: this.headerLoadData.jtjyqk,
        id: this.headerLoadData.jssStuJbqk.id,
      }
      let res = await httplogin.updateStuAndJiaTingQk(jssSqVo);
      if (res.data.code == 200) {
        this.$message({
          showClose: true, message: res.data.data.data, type: 'success'
        });
      } else {
        this.$message({
          showClose: true, message: res.data.data.data, type: 'warning'
        });
      }
      this.dialogDetails = false
    },
    async xq_listChange(val) {
      let obj = {
        xqdm: val
      }
      let res = await httplogin.getStuAndJiaQkFilterByNj(obj);
      if (res.data.code == 200) {
        this.nj_list = res.data.data.data
        if (res.data.data.data.length > 0) {
          this.formInline.nj = res.data.data.data[0].NJ
          this.nj_listChange(this.formInline.nj)
        }
      }
    },
    async nj_listChange(val) {
      let obj = {
        xqdm: this.formInline.xq,
        nj: val
      }
      let res = await httplogin.getStuAndJiaQkFilterByBj(obj);
      if (res.data.code == 200) {
        this.bj_list = res.data.data.data
        if (res.data.data.data.length > 0) {
          this.formInline.bj = res.data.data.data[0].BJNO
        }
        this.getOnGuardFacultyway()
      }
    },
    async getOnGuardFacultyway() {
      let obj = {
        pageNum: this.formInline.currentPage,
        pageSize: this.formInline.limit,
        nj: this.formInline.nj,
        xq: this.formInline.xq,
        xm: this.formInline.xm,
        bj: this.formInline.bj,
      }
      let res = await httplogin.getStuAndJiaQk(obj);
      const { data, xq, nj, count, bj } = res.data.data.data
      if (res.data.code == 200) {
        this.tableData = data
        this.formInline.total = count
      }
    },
    async getschoolList() {
      let res = await httplogin.getStuAndJiaQkFilterByXqdm();
      if (res.data.code == 200) {
        this.xq_list = res.data.data.data
        if (res.data.data.data.length > 0) {
          this.formInline.xq = res.data.data.data[0].newXqdm
          this.xq_listChange(this.formInline.xq)
        }
      }

    },

    getNowTimeDate() {
      const now = new Date();
      const year = now.getFullYear();
      const month = ('0' + (now.getMonth() + 1)).slice(-2);
      const day = ('0' + now.getDate()).slice(-2);
      // const hours = ('0' + now.getHours()).slice(-2);
      // const minutes = ('0' + now.getMinutes()).slice(-2);
      // const seconds = ('0' + now.getSeconds()).slice(-2);
      const formattedTime = year + "年" + month + "月" + day + "日"
      return formattedTime
    },
    sortPingyinfun(list) {
      list.sort((a, b) => a.XQJC.localeCompare(b.XQJC))
      return list
    },
    //点击查看详情 open 弹框
    handleClick(row) {
      this.getJssSqEditLoad(row)
      this.dialogDetails = true
    },
    async getJssSqEditLoad(val) {
      let obj = {
        stuId: val.STUID,
      }
      let res = await httplogin.updateStuAndJiaTingQkLoad(obj)
      if (res.data.code == 200) {
        this.headerLoadData = res.data.data.data
      }
    },
    //close 弹框
    handleClose() {
      this.dialogDetails = false
    },
    onSubmit() {
      this.getOnGuardFacultyway()
    },
    handleSizeChange(val) {
      this.formInline.limit = val
      this.getOnGuardFacultyway()
    },
    handleCurrentChange(val) {
      this.formInline.currentPage = val
      this.getOnGuardFacultyway()
    }
  }
}
</script>

<style scoped>
.width_100 {
  width: 100%;
}

.main {
  width: 100%;
  float: left;
  height: auto;
  box-sizing: border-box;
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #f6f6f6;
  overflow-x: auto;
  overflow-y: auto;
}

.main-body {
  width: 100%;
  height: auto;
  float: left;
  background-color: #fff;
  box-sizing: border-box;
  padding: 18px;
  border-radius: 12px;
}

.float-left {
  width: 100%;
  height: auto;
  float: left;
}

.main-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.d-flex {
  display: flex;
  align-items: center;
}

.mr-24 {
  margin-right: 24px;
}

.fontcolor {
  color: rgba(0, 0, 0, 0.88);
  word-break: break-word;
  line-height: 1.5714285714285714;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  font-size: 14px;
  box-sizing: border-box;
}

.footer-pagination {
  padding: 10px 0 0 0;
  text-align: right;
}

.font-all {
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  scrollbar-color: rgba(0, 0, 0, 0.25) rgba(5, 5, 5, 0.06);
}
</style>

<style scoped>
::v-deep .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}

::v-deep .el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}

::v-deep .el-dialog__header {
  background-color: #ff4d4f !important;

}

::v-deep .el-dialog__title {
  line-height: 24px;
  font-size: 20px;
  color: #fff !important;
  /* font-weight: 600; */
}
</style>